<template>
	<n-modal
		v-model:show="showModal"
		title="探店完成审核"
		preset="dialog"
		:show-icon="false"
		:mask-closable="false"
		style="width: 656px"
		@close="handleClose"
	>
		<div class="modal-body">
			<div class="ll-list-item">
				<span class="ll-list-item-title">探店模式：</span>
				<span>{{ detailInfo.seekTypeVal }}</span>
			</div>

			<div class="ll-list-item">
				<span class="ll-list-item-title">探店时间：</span>
				<span>{{ detailInfo.finalExploreTime }} {{ detailInfo.finalExploreTimeScope }}</span>
			</div>
			<div class="ll-list-item">
				<span class="ll-list-item-title">探店人数：</span>
				<span>{{ detailInfo.explorePeople }}</span>
			</div>
			<div class="ll-list-item">
				<span class="ll-list-item-title">探店门店：</span>
				<span>{{ detailInfo.exploreStore }}</span>
			</div>
			<div class="ll-list-item">
				<span class="ll-list-item-title">报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：</span>
				<span>¥{{ detailInfo.finalPrice / 100 }}</span>
			</div>
			<div class="ll-list-item">
				<span class="ll-list-item-title">视&nbsp;&nbsp;频&nbsp;ID：</span>
				<span>{{ detailInfoVideo.videoId }}</span>
			</div>
			<div class="ll-list-item">
				<span class="ll-list-item-title">视频链接：</span>
				<a :href="detailInfoVideo.videoUrl" target="view_frame" style="color: #1d6fe9">
					{{ detailInfoVideo.videoUrl }}
				</a>
			</div>
			<!-- <div
				v-for="(sourceVideo, index) in detailInfo.originalVideo"
				:key="index"
				class="ll-list-item ll-list-item-source"
			>
				<span v-if="index === 0" class="ll-list-item-title">原&nbsp;视&nbsp;&nbsp;频：</span>
				<span v-else class="ll-list-item-title">&emsp;&emsp;&emsp;&emsp;&emsp;</span>
				<div class="ll-list-item-source-info">
					<div
						class="ll-list-item-source-info-url"
						:title="sourceVideo.url"
						@click="sourceVideoClick(sourceVideo.id, sourceVideo.uploadNo)"
					>
						{{ sourceVideo.url }}
					</div>
					<n-icon
						title="点击复制"
						size="22"
						@click="copyToClipboard(sourceVideo.id, sourceVideo.uploadNo)"
					>
						<CopyOutline />
					</n-icon>
				</div>
			</div> -->
			<div class="ll-tip">
				<n-icon size="14">
					<AlertCircleOutline />
				</n-icon>
				请确认第三方视频ID是否符合条件
			</div>
		</div>
		<template #action>
			<n-button
				color="rgba(0, 0, 0, 0.1)"
				text-color="#333333"
				size="small"
				@click="showApproveMessage = true"
			>
				驳回
			</n-button>
			<n-button :disabled="disabledBtn" type="primary" size="small" @click="approve(1)">
				确认通过
			</n-button>
		</template>
	</n-modal>
	<n-modal
		v-model:show="showApproveMessage"
		title="驳回原因"
		preset="dialog"
		:show-icon="false"
		:mask-closable="false"
		style="width: 423px"
		@close="handleCloseApproveMessage"
	>
		<n-input
			v-model:value="backMessage"
			type="textarea"
			placeholder="请输入驳回原因"
			show-count
			maxlength="100"
			minlength="1"
		/>
		<template #action>
			<n-button
				color="rgba(0, 0, 0, 0.1)"
				text-color="#333333"
				size="small"
				@click="showApproveMessage = false"
			>
				关闭
			</n-button>
			<n-button :disabled="disabledBtn" type="primary" size="small" @click="approve(2)">
				确认驳回
			</n-button>
		</template>
	</n-modal>
	<DYFXPlay ref="player" :video-url="videoUrl" />
</template>

<script setup>
import DYFXPlay from '@/components/DYFXPlay.vue';
import { applyDetail, auditWithVideoPerson } from '@/api/applyReview';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';
import { AlertCircleOutline, CopyOutline } from '@vicons/ionicons5';
import dayjs from 'dayjs';
import useClipboard from 'vue-clipboard3';
import { createAuthInfoUrlByAlgorithmA } from '../../../api/resourceApply';

const message = useMessage();
const router = useRouter();

const props = defineProps({
	modal: Boolean,
	applyId: {
		typeof: Number,
		default: 0
	}
});

const emit = defineEmits(['update:modal', 'commit']);

const showModal = ref(props.modal);
const showApproveMessage = ref(false);
let backMessage = ref(null);
const disabledBtn = ref(false);

//获取审核详情
let detailInfo = ref({
	auditType: null,
	finalExploreTime: null,
	finalPrice: null,
	id: null
});
let detailInfoVideo = ref({ videoId: null });
const getApplyDetail = async () => {
	disabledBtn.value = false;
	const setForm = {
		id: props.applyId
	};
	const res = await applyDetail(setForm);
	if (res.code === 200) {
		detailInfo.value = res.data;
		detailInfoVideo.value = res.data.video;
		console.log(detailInfo.value);
	}
};

// 审核
const approve = async (type) => {
	if (type === 2 && !backMessage.value) {
		message.error('驳回原因不能为空');
		return;
	}
	const params = {
		auditType: detailInfo.value.auditType,
		finalExploreTime:
			detailInfo.value.finalExploreTime == null
				? null
				: dayjs(detailInfo.value.finalExploreTime).format('YYYY-MM-DD HH:mm') + ':00',
		finalPrice: detailInfo.value.finalPrice,
		message: type === 2 ? backMessage.value : '',
		result: type,
		seekId: detailInfo.value.id,
		// videoId: detailInfoVideo.value.videoId,
		videoKey: detailInfoVideo.value.id
	};
	const fullPath = router.currentRoute.value.fullPath;
	let res = null;
	if (
		fullPath === '/apply-review/findListWithVideoPerson' ||
		fullPath === '/apply-review/findListWithVideoPersonAdmin'
	) {
		disabledBtn.value = true;
		res = await auditWithVideoPerson(params);
	} else {
		message.error('非法操作！');
		return;
	}
	if (res && res.code === 200) {
		message.success('操作成功');
		backMessage.value = null;
		showApproveMessage.value = false;
		showModal.value = false;
		emit('update:modal', showModal.value);
		emit('commit');
	} else {
		message.error(res.message);
		disabledBtn.value = false;
	}
};

const handleCloseApproveMessage = () => {
	showApproveMessage.value = false;
	emit('update:modal', showModal.value);
};
//播放组件
const videoUrl = ref('');
const player = ref(null);
const sourceVideoClick = (id, code) => {
	const params = { resourceApplyNo: code, resourceId: id };
	createAuthInfoUrlByAlgorithmA(params).then(async (res) => {
		const { code, data } = res;
		if (code === 200 && data.length > 0) {
			player.value.openPlay();
			videoUrl.value = data;
		} else {
			message.success('播放失败，请重试！');
			console.log('播放失败！');
		}
	});
};
//复制文本

const { toClipboard } = useClipboard();
const copyToClipboard = async (id, code) => {
	const params = { resourceApplyNo: code, resourceId: id };
	createAuthInfoUrlByAlgorithmA(params).then(async (res) => {
		const { code, data } = res;
		if (code === 200 && data.length > 0) {
			try {
				await toClipboard(data);
				message.success('复制成功！');
				console.log('复制成功！');
			} catch (e) {
				message.error('复制失败，请重试！');
				console.log('复制失败，请重试！', e);
			}
		} else {
			message.error('复制失败，请重试！');
			console.log('复制失败，请重试！');
		}
	});
};

watch(
	() => ({ ...props }),
	(count) => {
		showModal.value = count.modal;
		if (count.modal) {
			getApplyDetail();
		}
	}
);
const handleClose = () => {
	showModal.value = false;
	emit('update:modal', showModal.value);
};
</script>

<style lang="less" scoped>
.modal-body {
	width: 624px;
	.ll-list-item {
		margin-bottom: 12px;
		font-size: 14px;
		color: #333333;
		&-title {
			color: #666666;
			display: inline-block;
			width: 70px;
			text-align: right;
		}
	}
	.ll-tip {
		color: #f5894e;
		font-size: 14px;
		display: flex;
		align-items: center;
	}
}
.ll-list-item-source {
	display: flex;
	align-items: center;
}
.ll-list-item-source-info {
	display: flex;
	align-items: center;
	cursor: pointer;
	&-url {
		color: #1d6fe9;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 400px;
		display: inline-block;
		height: 22px;
	}
}
</style>
